<style>
    .lrcbox{
        overflow: hidden;
        position: relative;
    }

    .lrcbox-in{
        position: absolute;
        width:100%;
        transition: top 0.5s linear 0s;
    }

    p.lrc{
        margin:0px;
        padding:0px;
        height: 30px;
        line-height:30px;
        font-size:16px;
        color:#666;
        text-align: center;
    }

    p.lrc.active{
        color:#5c96da;
    }

    p.lrc.before{
      color: #a7a7a7
    }
</style>
<template>
  <div class="lrcbox" id="lrcbox">
      <div class="lrcbox-in" :style="{'top':ttop+'px'}">
        <p class="lrc" v-for="(item,index) in lrcArray" :key="index" :class="{'active':(activeIndex===index),'before':(index<activeIndex)}">{{item.txt}}</p>
      </div>
  </div>
</template>
<script>

import {mapState} from 'Vuex'
export default {
  data () {
    return {
      activeIndex: 0
    }
  },
  computed: mapState({
    lrcLink: state => state.core.lrcLink,
    lrcArray: state => state.lrc.lrcArray,
    currentTime: state => state.core.currentTime,
    ttop () {
      return this.activeIndex * -30 + 200
    }
  }),
  watch: {
    lrcLink (val) {
      this.$store.dispatch('getLrc', val)
    },
    currentTime (val) {
      for (let i = 0; i < this.lrcArray.length; i++) {
        if (val >= this.lrcArray[i].timeStamp) {
          this.activeIndex = i
        }
      }
    }
  }
}
</script>

